<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
      *{
      margin: 0;
      padding: 0;
      }
      ul,li{
         list-style:none;
      }
      .container{
         width:400px;
         height:100px;
         background:pink;
         margin:0 auto;
         overflow:hidden;
      }
      .list{
         width:450px;
      }
      .container .list li{
         width:48px;
         height:100px;
         background:orange;
         border-right:2px solid #ccc;
         float:left;
         position:relative;
         overflow: hidden;
      }
      .container .list li .title{
         width:48px;
         height:100px;
      }
      .container .list li .content{
         width:200px;
         height:100px;
         background:skyblue;
         position:absolute;
         left:48px;
         top:0;
      }
   </style>
</head>
<body>
   <div class="container">
      <ul class="list">
            <li>
                  <div class="title">标题部分</div>
                  <div class="content">内容部分</div>
            </li>
            <li>
                  
                  <div class="title">标题部分</div>
                  <div class="content">内容部分</div>
            </li>
            <li>
                  
                  <div class="title">标题部分</div>
                  <div class="content">内容部分</div>
            </li>
            <li>
                  
                  <div class="title">标题部分</div>
                  <div class="content">内容部分</div>
            </li>
      </ul>
   </div>
   <script src="./jquery/jquery.js"></script>
   <script>
      $('.list li').on('mouseover',function(){
         // console.log(1);
         // $(this).animate({
         //    width:248
         // })
         // .siblings('li')
         // .animate({
         //    width :48
         // })
         $(this)
         .stop(true)
         .animate({
            width:248
         })
         .siblings('li')
         .stop(true)
         .animate({
            width:48
         })
      })
   </script>
</body>
</html>